<!--
 * @Description: 坐标定位组件
 * @Version: 2.0
 * @Autor: GerhardYang
 * @Date: 2019-04-16 22:31:37
 * @LastEditors: 杨光辉(GerhardYang)
 * @LastEditTime: 2021-08-09 09:21:33
 -->
<template>
  <a-form class="form" style="border: 1px solid #d9d9d9">
    <a-form-item
      label="经度"
      :label-col="formItemLayout.labelCol"
      :wrapper-col="formItemLayout.wrapperCol"
    >
      <a-input
        v-decorator="[
          'username',
          { rules: [{ required: true, message: 'Please input your name' }] },
        ]"
        v-model="xyz1"
      />
    </a-form-item>
    <a-form-item
      label="纬度"
      :label-col="formItemLayout.labelCol"
      :wrapper-col="formItemLayout.wrapperCol"
    >
      <a-input v-model="xyz2" />
    </a-form-item>
    <a-form-item
      label="级别"
      :label-col="formItemLayout.labelCol"
      :wrapper-col="formItemLayout.wrapperCol"
    >
      <a-input-number v-model="zoom" :min="0" :max="20" />
    </a-form-item>
    <a-form-item>
      <a-button type="primary" @click="flyto">确定</a-button>
      <a-button type="default" @click="reset">重置</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
export default {
  props: {
    mapXyz: {
      type: Object,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      formItemLayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 16 },
      },
      xyz1: this.mapXyz.center[1],
      xyz2: this.mapXyz.center[0],
      zoom: this.mapXyz.zoom,
    };
  },

  computed: {
    map() {
      return this.$store.state.map;
    },
  },

  mounted() {},
  methods: {
    reset() {
      (this.xyz1 = this.mapXyz.center[1]),
        (this.xyz2 = this.mapXyz.center[0]),
        (this.zoom = this.mapXyz.zoom);
    },
    flyto() {
      this.map.flyTo([this.xyz2, this.xyz1], this.zoom);
    },
  },
};
</script>

<style lang="less" scoped>
.form {
  padding: 20px;
  background-color: #fff;
  border-radius: 1rem;
  .ant-btn-primary {
    margin-left: 10px;
    width: 70px;
  }
  .ant-btn-default {
    margin-left: 10px;
    width: 70px;
  }
}
</style>
